<!-- 重写了穿梭框功能 03-29 雷雷 -->
<template>
  <vxe-modal v-model="value" title="选择" :zIndex="1000" width="1000" height="500" :before-hide-method="closeModel">

    <div class="transfer-container">

      <div class="list-container">
        <div class="title">待选</div>
        <!-- display: flow-root 触发BFC -->
        <div style="height: calc(100% - 40px); display: flow-root">
          <SearchTree ref="SearchTree" :personList="personList" :isPersonCheck="isPersonCheck" style="margin: 10px"/>
        </div>
      </div>

      <div style="display: flex; align-items: center; justify-content: center">
        <div class="arrow-container" style="margin-right: 0.15rem;" @click="rightShift">
          <i class="el-icon-right arrow-right"/>
        </div>
      </div>

      <div class="list-container">
        <div class="title">已选</div>
        <ul class="selected-container">
          <li class="selected-person-item" v-for="item in rightList" :key="item.id">
            <span>{{ item.label }}</span>
            <i class="el-icon-circle-close delete-icon" @click="deleteSelectedItem(item.id)"/>
          </li>
        </ul>
      </div>

    </div>

    <footer class="footer-container">
      <el-button type="primary" size="mini" plain @click="confirm">确认</el-button>
      <el-button size="mini" type="danger" plain @click="closeModel">取消</el-button>
    </footer>

  </vxe-modal>
</template>

<script>
import SearchTree from './SearchTree'

export default {
  props: {
    value: { default: false },
    personList: { default: () => [] },
    compareIds: { default: () => [] },   // 从个人职责来到职责对比的时候会带来 人员数组 需要操作树, 让它默认选中
    isPersonCheck: { default: false, type: Boolean },   // 是否只能选择人员
  },
  provide() { // 目的是为了在本组件的子组件`SearchTree.vue`里调用本组件的 `rightShift` 方法
    return { Transfer: this }
  },
  components: { SearchTree },
  watch: {
    // 当组件显示的时候
    value: {
      handler(nv) {
        if(nv) {
          setTimeout(() => {
            // 操作 ztree 让其选中
            this.getSearchTreeInstance().execCheck(this.compareIds)
          }, 0)
        }
      }
    }
  },
  data: () => ({
    selectedList: [], // 已选择的人员

    rightList: [] // 右侧数据
  }),
  methods: {
    // 获取子组件实例
    getSearchTreeInstance() {
      return this.$refs.SearchTree
    },
    // 右移
    rightShift() {
      // 这里直接从子组件取值
      const instance = this.getSearchTreeInstance()

      const compareData = instance.isShowTree ? instance.selectedTreeList : instance.getSelectedCheckboxList()

    //   if (compareData.length < 2) return this.$message.warning('请至少选择两项')
      if (new Set(compareData.map(x => x.type)).size !== 1) return this.$message.warning('部门和人员不能对比')
      const rightListCopy = this.rightList.concat(...compareData)
      const ids = rightListCopy.map(x => x.id)
      const nids = [...new Set(ids)]
      this.rightList = nids.map(y => rightListCopy.find(z => z.id === y))

    },

    deleteSelectedItem(id) {
      // 根据 id 让 tree 取消某个节点的选中
      this.getSearchTreeInstance().cancelCheck(id)

      const idx = this.rightList.findIndex(x => x.id === id)
      this.rightList.splice(idx, 1)
    },
    confirm() {
      if (this.rightList.length < 1) return this.$message.warning('至少选择一项')
      this.$emit("allShuttleBox", this.rightList);
      this.closeModel()
    },
    closeModel() {
      this.$emit('input', false)
    }
  }

}
</script>

<style lang="scss" scoped>
::v-deep .vxe-modal--body {
  overflow: hidden !important;
}

.transfer-container {
  height: calc(100% - 60px);
  display: grid;
  grid-template-columns: 1fr 100px 1fr;

  .list-container {
    height: 100%;
    overflow: auto;
    border: 1px solid #eee;
  }

  .title {
    height: 40px;
    background: #f6f7fa;
    color: #000;
    font-size: 16px;
    font-weight: bold;
    text-align: center;
    line-height: 40px;
    position: sticky;
    top: 0;
    z-index: 2;
  }

  .arrow-container {
    width: 80%;
    height: 30px;
    background-color: #1890FF;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: .2s;

    &:hover {
      background-color: #46A6FF;
    }

    .arrow-right {
      font-size: 22px;
      color: #fff;
    }
  }


  .selected-container {
    .selected-person-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      transition: .2s;
      padding: 10px 15px;

      &:hover {
        background-color: #eee;
      }

      .delete-icon {
        cursor: pointer;
        font-size: 18px;
      }

    }
  }
}

.footer-container {
  height: 60px;
  padding-right: 30px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

</style>
